<template>
  <div class='container'>
    <span>wuchuanchuan</span>
    <el-form :inline="true" :model="serachForm" ref="ruleFormRef">
      <el-form-item prop="directoryName" label="目录名称">
        <el-input size="small" type="text" v-model="serachForm.directoryName">
        </el-input>
      </el-form-item>
      <el-form-item prop="state" label="状态">
        <el-select v-model="serachForm.state" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <template slot-scope="scope">

          <el-button icon="el-icon-refresh" size="mini" @click="deletInput">清除</el-button>

          <el-button type="primary" icon="el-icon-search" size="mini" @click="clickSearch(scope.row)">搜索</el-button>

        </template>

      </el-form-item>
      <el-form-item>
        <span style="padding-left: 450px">
          <el-button type="primary" icon="el-icon-circle-plus" size="mini" @click="addSubject">新增目录
          </el-button>
        </span>
      </el-form-item>
    </el-form>
    <el-alert type="info" show-icon closable>
      <span>数据共{{total}}条</span>
    </el-alert>
    <!-- 表格 -->
    <el-table :data="dataList" style="width: 100%">
      <el-table-column type="index" label="序号" width="150">
      </el-table-column>
      <el-table-column prop="subjectName" label="所属学科" width="150">
      </el-table-column>
      <el-table-column prop="directoryName" label="目录名称" width="150">
      </el-table-column>
      <el-table-column prop="username" label="创建者" width="150">
      </el-table-column>
      <el-table-column prop="addDate" :formatter="dateFormat" label="创建日期" width="150">
      </el-table-column>
      <el-table-column prop="totals" label="面试题数量" width="150">
      </el-table-column>
      <el-table-column prop="state" label="状态" width="160">
        <template slot-scope="scope">
          <el-tag type='danger' v-if="scope.row.state=='0'" plain size="mini">禁用</el-tag>
          <el-tag v-if="scope.row.state=='1'" plain size="mini">启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="" label="操作" width="260">
        <template slot-scope="scope">
          <el-button @click="updateState(scope.row.id,1)" v-if="scope.row.state=='0'" type="text">启用
          </el-button>
          <el-button @click="updateState(scope.row.id,0)" v-if="scope.row.state=='1'" type="text">禁用
          </el-button>
          <el-button type="text" @click="editClick(scope.row)">修改</el-button>
          <el-popconfirm title="确定要永久删除此条数据吗 " @confirm="deleteStudy(scope.row.id)">
            <el-button slot="reference" type="text">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 底脚 -->
    <div class="block">
      <el-pagination :page-sizes="[5, 10,20,50]" :page-size="10" @current-change="pageChange"
        @size-change="pageSizeChange" style="float:right" layout="total, sizes, prev, pager, next, jumper"
        :total="total" background>
      </el-pagination>
    </div>
    <!-- 新增对话框 -->
    <el-dialog title="新增目录" :visible.sync="addLabelDialogVisible" width="30%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
        <el-form-item label="目录名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>
        <el-form-item label="所属学科" prop="region">
          <el-select v-model="ruleForm" placeholder="请选择所属学科">
            <el-option label="区域一" value="ruleForm.subjectName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button @click="addLabelDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="addSureLabelDialogVisible">确 定</el-button>
    </el-dialog>
    <!-- 修改对话框 -->
    <el-dialog title="修改目录" :visible.sync="editSureLabelDialogVisible" width="30%">
      <el-form :model="editForm" :rules="rules" ref="editForm" label-width="100px">
        <el-form-item label="目录名称" prop="directoryName">
          <el-input v-model="editForm.directoryName"></el-input>
        </el-form-item>
        <el-form-item label="所属学科" prop="subjectID">
          <el-select v-model="editForm.subjectName" placeholder="请选择所属学科">
            <el-option v-for="item in subjectNameOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-button @click="editSureLabelDialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="editDialogVisible">确 定</el-button>
    </el-dialog>
  </div>
</template>

<script>
import { getNewList, subject } from '../../api/base/frame'
import { remove, add, changeState, simple, update } from '../../api/hmmm/directorys'
import moment from 'moment'
export default {
  data () {
    return {
      ruleForm: {
        subjectName: ''
      },
      editForm: {
        subjectName: '',
        directoryName: ''
      },
      addLabelDialogVisible: false,
      // 修改
      editSureLabelDialogVisible: false,
      queryForm: {
        page: 1,
        pagesize: 10
      },
      serachForm: {
        page: 1,
        pagesize: 10,
        directoryName: '',
        state: 1
      },
      total: 0,
      value3: '',
      newList: [],
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      },
      dataList: [],
      value: '',
      value1: '',
      subjectNameOptions: [],
      options: [{
        label: '禁用',
        value: 0
      },
      {
        label: '启用',
        value: 1
      }
      ]

    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 修改
    async editDialogVisible () {
      const { data: res } = await update(this.editForm)
      if (res.success) {
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '更新失败',
          type: 'error'
        })
      }
      this.editSureLabelDialogVisible = false
      this.getList()
    },
    // 修改目录对话框
    editClick (val) {
      this.editForm = val
      this.querySbujectName()
      this.editSureLabelDialogVisible = true
    },
    async querySbujectName () {
      const { data: res } = await simple()
      this.subjectNameOptions = res
    },
    // 删除
    async deleteStudy (id) {
      const { data: res } = await remove({ id: id })
      if (res.success) {
        this.$message({
          message: '删除成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '删除失败',
          type: 'error'
        })
      }
      this.getList()
    },
    pageSizeChange (val) {
      this.queryForm.pagesize = val
      this.getList()
    },
    pageChange (val) {
      this.queryForm.page = val
      this.getList()
    },
    // 确认按钮
    async addSureLabelDialogVisible () {
      const { data: res } = await add()
      this.dataList = res.items
      console.log(res)
    },
    // 点击搜索，搜索状态
    async clickSearch (row) {
      const { data: res } = await getNewList(this.serachForm)
      this.dataList = res.items
      this.total = res.counts
    },
    // 清空输入框的值
    deletInput () {
      this.$refs.ruleFormRef.resetFields()
    },
    // 新增目录
    async addSubject () {
      this.addLabelDialogVisible = true
      const { data: res } = await subject()
      console.log(res)
    },

    // 状态更新
    async updateState (id, state) {
      const { data: res } = await changeState({ id: id, state: state })
      if (res.success) {
        this.$message({
          message: '更新成功',
          type: 'success'
        })
      } else {
        this.$message({
          message: '更新失败',
          type: 'error'
        })
      }
      this.getList()
    },

    async getList () {
      const { data: res } = await getNewList(this.queryForm)
      this.dataList = res.items
      this.total = res.counts
    },
    // 格式化时间
    dateFormat (row, column) {
      var date = row[column.property]

      if (date === undefined) {
        return ''
      }

      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  background-color: #fff;
  margin: 15px 10px;
}
</style>
